<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>
        管理员列表
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
    <link rel="stylesheet" th:href="@{/css/main.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <!--导入ElementUI样式列表，css样式一般都在页面头部-->
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>
<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>角色管理</cite></a>
              <a><cite>角色列表</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                        style="line-height:30px">ဂ</i></a>
</div>

<div class="x-body">
    <div class="app-container" id="app">
        <div class="search-div">
            <el-form label-width="70px" size="small">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="关 键 字">
                            <el-input style="width: 95%" v-model="searchMap.keyword"
                                      placeholder="角色名称/权限规则/角色描述"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="display:flex">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData(1)">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
                    <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
                </el-row>
                <el-divider></el-divider>
            </el-form>
        </div>
        <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :with-header="false">
            <el-divider>
                <el-tag type="success">{{ roleName }}</el-tag>
            </el-divider>
            <el-tree
                    style="margin: 20px 0"
                    ref="tree"
                    :data="sysMenuList"
                    node-key="id"
                    show-checkbox
                    :props="defaultProps"
            ></el-tree>

            <el-divider></el-divider>
            <div style="padding: 20px 20px 20px 100px;">
                <el-button :loading="loading" type="primary" icon="el-icon-check" size="mini" @click="saves">保存
                </el-button>
                <el-button @click="drawer=false" size="mini" icon="el-icon-refresh-right">返回
                </el-button>
            </div>
        </el-drawer>
        <el-table
                v-loading="listLoading"
                :data="list"
                stripe
                border
                style="width: 100%;margin-top: 10px;">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="角色名称">
                            <span>{{ props.row.roleName }}</span>
                        </el-form-item>
                        <el-form-item label="权限规则">
                            <span>{{ props.row.roleDesc }}</span>
                        </el-form-item>
                        <el-form-item label="角色描述">
                            <span>{{ props.row.roleDescribe }}</span>
                        </el-form-item>
                        <el-form-item label="分配权限">
                            <el-button
                                    type="warning"
                                    size="mini"
                                    @click="showAssignRole(props.row)"
                            >分配权限
                            </el-button>
                        </el-form-item>
                        <el-form-item label="状态">
                            <span v-if="props.row.status == 1">
                                <el-tag type="success">启用</el-tag>
                            </span>
                            <span v-if="props.row.status == 0">
                               <el-tag type="danger">未启用</el-tag>
                            </span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="角色 ID"
                    prop="roleId">
            </el-table-column>
            <el-table-column
                    label="角色名称"
                    prop="roleName">
            </el-table-column>
            <el-table-column
                    label="权限规则"
                    prop="roleDesc">
            </el-table-column>
            <el-table-column
                    label="角色描述"
                    prop="roleDescribe">
            </el-table-column>
            <el-table-column label="状态" width="80">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.status === 1"
                            @change="switchStatus(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            size="mini"
                            @click="edit(scope.row.roleId)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="removeDataById(scope.row.roleId)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
            <el-form :rules="rules" ref="dataForm" :model="sysRole" label-width="100px" size="small"
                     style="padding-right: 40px;">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="sysRole.roleName"/>
                </el-form-item>
                <el-form-item label="拥有权限规则" prop="roleDesc">
                    <el-input type="textarea" v-model="sysRole.roleDesc"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDescribe">
                    <el-input type="textarea" v-model="sysRole.roleDescribe"></el-input>
                </el-form-item>
                <el-form-item style="display:none">
                    <el-input v-model="sysRole.roleId"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        			        <el-button @click="dialogVisible = false" size="small"
                                       icon="el-icon-refresh-right">取 消</el-button>
        			        <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()"
                                       size="small">确 定</el-button>
        			      </span>
        </el-dialog>
        <br/>
        <!-- 分页组件 -->
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="searchMap.limit"
                layout="prev, pager, next,sizes"
                :page-sizes="[2,10,20]"
                style="text-align: right;"
                :total="total">
        </el-pagination>
    </div>
</div>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<!--js脚本一般是放在页面尾部-->
<!--Vue js脚本-->
<script th:src="@{/js/vue.js}" charset="utf-8"></script>
<!--引入ElementUI组件库-->
<script th:src="@{/js/index.js}" charset="utf-8"></script>
<!--引入Axios js脚本-->
<script th:src="@{/js/axios.js}" charset="utf-8"></script>
<!--引入时间插件包Momentjs-->
<script th:src="@{/js/moment.min.js}" charset="utf-8"></script>

<script>
    var app = new Vue({
        el: "#app",//声明当前Vue在页面的作用域
        data: {
            roleName: '',
            roleId: '',
            drawer: false,
            listLoading: true, 		// 数据是否正在加载
            list: [], 				// 角色列表
            total: 0, 				// 总记录数
            page: 1, 				// 页码
            limit: 2, 				// 每页记录数
            searchObj: {}, 			// 查询条件
            dialogVisible: false,   // 弹出添加框
            sysRole: {status: ''},				// 封装添加表单数据
            multipleSelection: [],   // 批量删除选中的记录列表
            searchMap: {"keyword": this.keyword, "page": 1, "limit": 2},
            rules: {
                roleName: [
                    {required: true, message: '角色名称', trigger: 'blur'}
                ],
                roleDesc: [
                    {required: true, message: '拥有权限规则', trigger: 'blur'}
                ],
                roleDescribe: [
                    {required: true, message: '角色描述', trigger: 'blur'}
                ]
            },
            loading: false, // 用来标识是否正在保存请求中的标识, 防止重复提交
            sysMenuList: [], // 所有
            defaultProps: {
                children: 'children',
                label: 'rightText'
            }
        },
        methods: {
            // 保存权限列表
            saves() {
                //获取到当前子节点及父节点
                const allCheckedNodes = this.$refs.tree.getCheckedNodes(false, true);
                let idList = allCheckedNodes.map(node => node.rightCode);
                console.log(idList)
                let assginMenuVo = {
                    roleId: this.roleId,
                    menuIdList: idList
                }
                this.loading = true
                console.log(assginMenuVo)
                axios.post("/right/doAssign", assginMenuVo).then((res) => {
                    console.log(res);
                    if (res.data.flag) {
                        this.loading = false;
                        this.$message.success('分配权限成功');
                        this.drawer = false;
                    }
                })
            },
            //获取菜单信息
            fetchDataRple(roleId) {
                axios.get("/right/toAssign?roleId=" + roleId).then((res) => {
                    const sysMenuList = res.data.data;
                    this.sysMenuList = sysMenuList;
                    const checkedIds = this.getCheckedIds(sysMenuList)
                    this.$refs.tree.setCheckedKeys(checkedIds)
                })
            },
            //得到所有选中的id列表
            getCheckedIds(auths, initArr = []) {
                return auths.reduce((pre, item) => {
                    if (item.select && item.children.length === 0) {
                        pre.push(item.id)
                    } else if (item.children) {
                        this.getCheckedIds(item.children, initArr)
                    }
                    return pre
                }, initArr)
            },
            //打开权限分配按钮
            showAssignRole(row) {
                this.roleName = row.roleName;
                this.fetchDataRple(row.roleId);
                this.drawer = true;
                this.roleId = row.roleId;
            },
            //切换用户状态
            switchStatus(row) {
                row.status = row.status === 1 ? 0 : 1;
                axios.get("/role/updateStatus?id=" + row.roleId + "&status=" + row.status).then((res) => {
                    if (res.data.flag) {
                        this.$message.success('操作成功');
                        this.fetchData(this.page);
                    }
                })
            },
            removeDataById(id) {
                this.$confirm('请问您是否要删除该用户信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //执行删除操作
                    axios.post("/role/del?id=" + id).then((res) => {
                        if (res.data.flag) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                        this.fetchData(this.page);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //更新
            update() {
                axios.post("/role/update", this.sysRole).then((res) => {
                    this.$message.success('操作成功');
                    this.dialogVisible = false;
                    this.fetchData(this.page);
                })
            },
            //添加
            save() {
                axios.post("/role/add", this.sysRole).then((res) => {
                    this.$message.success('操作成功');
                    this.dialogVisible = false;
                    this.fetchData(this.page);
                });
            },
            //添加或更新
            saveOrUpdate() {
                if (!this.sysRole.roleId) {
                    this.save();
                } else {
                    this.update();
                }
            },
            //编辑
            edit(id) {
                this.dialogVisible = true;
                axios({
                    method: "GET",
                    url: "role/findById",
                    params: {"id": id}
                }).then((res) => {
                    this.sysRole = res.data.data;
                    console.log(this.sysRole)
                    // 数据加载并绑定成功
                    this.listLoading = false;
                });
            },
            //弹出添加表单
            add() {
                this.dialogVisible = true;
                this.sysRole = {};
            },
            // 加载banner列表数据
            fetchData(page) {
                if (page != null) {
                    this.searchMap.page = 1;
                }
                if (this.createTimes && this.createTimes.length == 2) {
                    this.searchMap.createTimeBegin = this.createTimes[0];
                    this.searchMap.createTimeEnd = this.createTimes[1];
                }
                axios.post("/role/search", this.searchMap).then((res) => {
                    this.list = res.data.data.records;
                    this.total = res.data.data.total;
                    // 数据加载并绑定成功
                    this.listLoading = false;
                });
            },
            // 重置查询表单
            resetData() {
                console.log('重置查询表单');
                this.searchMap = {
                    "createTimeBegin": "",
                    "createTimeEnd": "",
                    "keyword": this.keyword,
                    "page": 1,
                    "limit": 2
                };
                this.createTimes = [];
                this.fetchData();
            },
            //handleSizeChange每页数量发生变化后触发的方法
            handleSizeChange(pageSize) {
                this.searchMap.limit = pageSize;
                this.fetchData();
            },
            //handleCurrentChange页码变化触发方法
            handleCurrentChange(pageNum) {
                this.searchMap.page = pageNum;
                this.fetchData();
            },
        },
        created: function () {//Vue生命周期方法，加载页面时会执行该方法
        layui.use(['laydate', 'element', 'laypage', 'layer'], function () {
            $ = layui.jquery;//jquery
            layer = layui.layer;//弹出层
            okLoading.close($);
            layer.ready(function () { //为了layer.ext.js加载完毕再执行
                layer.photos({
                    photos: '#x-img'
                });
            });
        });
        this.fetchData();
    }
    })
    ;

</script>

</body>
</html>
